<template>
  <div class="reportBox">
    <div class="repText">
      <el-input
        type="textarea"
        class="textarea"
        :rows="8"
        placeholder="请输入sql语句,按回车键 或 按查询按钮查询"
        v-model="sqlQuery"
        @keyup.enter.native="btnSeachSql"
      ></el-input>
      <el-button type="primary" @click="btnSeachSql" style="float:right;margin-top:5px">查询</el-button>
    </div>
    <div class="repTable" v-show="isTableShow">
      <el-table
        v-loading="loading"
        :data="showDbTable.rows"
        border
        stripe
        style="width: 100%; margin-top:10px"
      >
        <!-- <el-table-column type="index" fixed label="序号" :align="'center'"></el-table-column> -->
        <el-table-column
          :prop="item.label"
          v-for="(item,index) in showDbTable.columns"
          :key="index"
          :label="item.label"
          :align="'center'"
          width="200"
          :show-overflow-tooltip="istrue"
        ></el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 20px"
        :current-page.sync="pn"
        @current-change="changePage"
        @size-change="changePage"
        :page-size.sync="ps"
        :page-sizes="[10, 15, 20, 25, 30]"
        layout="sizes, total, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import localStorage from '@/utils/localStorage'
export default {
  data() {
    return {
      sqlQuery: '',
      ps: 15,
      pn: 1,
      totalSize: 0,
      showDbTable: '',
      isTableShow: false,
      loading: false,
      istrue: true,
    }
  },
  methods: {
    //查SQL询表
    btnSeachSql() {
      this.isTableShow = true
      this.loading = true
      let params = {
        id: localStorage.get('dbSecrekey'),
        params: {
          sql: this.sqlQuery,
          pn: this.pn,
          ps: this.ps,
        },
      }
      this.$db.getSqlTable(params).then((res) => {
        if (res.code == 200) {
          this.showDbTable = res.data

          this.loading = false
        } else {
          this.$message.error(res.code + '-' + res.msg)
        }
      })
    },

    changePage() {
      this.btnSeachSql()
    },
  },
}
</script>

<style lang="less">
.repText {
  .textarea {
    border: 0;
  }
  .repTable {
    margin-top: 20px;
  }
}
</style>